<template>
    <n-grid :cols="2" :x-gap="12">
        <n-grid-item>
            <n-card size="large">
                <template #header>
                    <n-space>
                        <n-text>
                            初始地图顺序
                        </n-text>
                    </n-space>
                </template>
                <n-data-table :columns="originalColumns" :data="originalMaps" :single-line="false"
                              striped></n-data-table>
            </n-card>
        </n-grid-item>
        <n-grid-item>
            <n-card size="large">
                <template #header>
                    <n-space>
                        <n-text>
                            随机地图顺序
                        </n-text>
                        <n-popconfirm negative-text="否" positive-text="是" @positive-click="this.reShuffleMaps()">
                            <template #trigger>
                                <n-button round secondary strong type="primary">
                                    重新洗牌
                                </n-button>
                            </template>
                            <n-text>是否要重新生成地图顺序？</n-text>
                        </n-popconfirm>
                        <n-button round secondary strong type="info" @click="this.saveMaps();">
                            保存地图状态
                        </n-button>
                        <n-popconfirm negative-text="否" positive-text="是" @positive-click="this.readSavedMaps()">
                            <template #trigger>
                                <n-button color="#ff69b4" round secondary strong>
                                    读取地图状态
                                </n-button>
                            </template>
                            <n-text>是否要读取保存的地图状态？当前地图顺序会被覆盖</n-text>
                        </n-popconfirm>
                        <n-popconfirm negative-text="否" positive-text="是" @positive-click="this.clearSavedMaps()">
                            <template #trigger>
                                <n-button color="#8a2be2" round secondary strong>
                                    清除地图状态
                                </n-button>
                            </template>
                            <n-text>是否要清除保存的地图状态？</n-text>
                        </n-popconfirm>
                    </n-space>
                </template>
                <n-data-table :columns="shuffledColumns" :data="shuffledMaps" :single-line="false"
                              striped></n-data-table>
            </n-card>
        </n-grid-item>
    </n-grid>
</template>

<script lang="ts">
import maps from '../../public/ra2-maps.json';
import {h} from "vue";
import ManagementCell from "./ManagementCell.vue";
import {useMessage} from "naive-ui";

export default {
    name: "MapManagement",
    data() {
        return {
            originalColumns: [
                {title: '序号', key: 'id', align: 'center', width: 100},
                {title: '地图名称', key: 'mapName', align: 'center'}
            ],
            shuffledColumns: [
                {title: '行号', key: 'rowId', align: 'center', width: 100},
                {title: '序号', key: 'id', align: 'center', width: 100},
                {title: '地图名称', key: 'mapName', align: 'center'},
                {
                    title: '标记',
                    align: 'center',
                    render(row) {
                        return h(ManagementCell, {
                            row
                        });
                    }
                }
            ],
            originalMaps: [],
            shuffledMaps: [],
            storageKey: 'shuffledMaps'
        };
    },
    methods: {
        initMaps() {
            this.originalMaps = maps.map((val, idx) => {
                return {id: idx + 1, ...val};
            });
            this.shuffleMaps();
        },
        shuffleMaps() {
            this.shuffledMaps = [];
            let cards = [...this.originalMaps];
            let cardCount = cards.length;
            for (let i = 0; i < cardCount; i++) {
                this.shuffledMaps.push(
                    ...cards.splice(Math.floor(Math.random() * cards.length), 1));
            }
            this.shuffledMaps.forEach((val, idx) => {
                val.rowId = idx + 1;
                val.used = false;
                val.deprecated = false;
            })
        },
        reShuffleMaps() {
            this.shuffleMaps();
            this.message.success('重新生成了随机图顺序');
        },
        saveMaps() {
            localStorage.setItem(this.storageKey, JSON.stringify(this.shuffledMaps));
            this.message.success('当前地图状态已存档');
        },
        readSavedMaps() {
            if (localStorage.getItem(this.storageKey)) {
                this.shuffledMaps = JSON.parse(localStorage.getItem(this.storageKey));
                this.message.success('存档的地图状态已经读取');
            } else {
                this.message.warning('没有已经存档的地图状态');
            }
        },
        clearSavedMaps() {
            if (localStorage.getItem(this.storageKey)) {
                localStorage.removeItem(this.storageKey);
                this.message.success('存档的地图状态已经清除');
            } else {
                this.message.warning('没有已经存档的地图状态');
            }
        }
    },
    setup(props, context) {
        const message = useMessage();
        return {
            message: useMessage()
        };
    },
    mounted() {
        this.initMaps();
    }
}
</script>

<style scoped>

</style>
